<template>
	<scroll-view class="find-wrap"
		scroll-y="true"
		lower-threshold="10"
		@scrolltolower="onScrolltolower"
	>
		<view class="swiper-wrap">
			<swiper 
				class="swiper"
				indicator-active-color="#ff2d40" 
				:circular="true" 
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="3000" 
				:duration="1000"
			>
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image lazy-load class="image" :src="item.imageUrl"></image>
						<text :style="{background: item.titleColor}" class="tag">{{item.typeTitle}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="btns-wrap">
			<view class="btn-item" v-for="(item,index) in btnsList" :key="index">
				<view class="btn-view">
					<image class="image" :src="item.img"></image>
					<text class="text">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="view-content">
			<view class="title-content">
				<text class="title">推荐歌单</text>
				<text class="title-btn">歌单广场</text>
			</view>
			<view class="img-wrap">
				<view class="img-content" v-for="(item, index) in randomPersonalizedList" :key="index">
					<view class="img">
						<image lazy-load class="image" :src="item.picUrl"></image> 
						<view class="img-text">
							<text class="triangle"></text>
							<text class="count">{{item.playCountDesc}}</text>
						</view>
					</view>
					<text class="img-name">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="view-content">
			<view class="title-content">
				<text class="title">新歌</text>
				<text class="title-btn">新歌推荐</text>
			</view>
			<view class="img-wrap">
				<view class="img-content" v-for="(item, index) in randomNewSongList" :key="index">
					<view class="img">
						<image lazy-load class="image" :src="item.picUrl"></image>
						<view class="img-text1">
							<text class="triangle1"></text>
						</view>
					</view>
					<text class="name">{{item.name}}</text>
					<text class="people">{{item.artists[0].name}}</text>
				</view>
			</view>
		</view>
		<view class="mv-content" v-for="(item, index) in mvList" :key="index">
			<view class="mv-card-wrap">
				<view class="desc">{{item.desc}}</view>
				<view class="my-card">
					<view class="image-wrap">
						<!-- #ifndef H5 -->  
						<image class="image" :src="item.cover"></image>
						<!-- #endif --> 
						<!-- #ifdef H5 -->  
						<img class="image" v-lazy="item.cover" />
						<!-- #endif --> 
						
						<view class="icons">
							<view class="play-count">
								<text class="triangle"></text>
								<text class="count">{{item.playCountDesc}}</text>
							</view>
							<view class="time">
								<text class="play"></text>
								<text class="count">{{item.time}}</text>
							</view>
						</view>
					</view>
					<view class="name">{{item.artistName + ' (' + item.name + ')'}}</view>
				</view>
				<view class="actions">
					<view class="counts">
						<view class="like">
							<text class="iconfont icon-like-kong"></text>
							<text class="like-count">{{item.likeCount}}</text>
						</view>
						<view class="comment">
							<text class="iconfont icon-comment"></text>
							<text class="comment-count">{{item.commentCountDesc}}</text>
						</view>
					</view>
					<view class="more-btn-wrap">
						<text class="more-btn"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="loading" v-if="uploading">
			<text>加载中...</text>
		</view>
		<view class="nomore" v-if="nomore">
			<text>没有更多了...</text>
		</view>
	</scroll-view>
</template>

<script>
	import { randomList, renderTime } from "@/common/utils.js";
	export default {
		data() {
			return {
				bannerList: [],
				btnsList: [
					{text: '每日推荐', img: '../../static/imgs/main/mrtj.png'},
					{text: '歌单', img: '../../static/imgs/main/gd.png'},
					{text: '排行榜', img: '../../static/imgs/main/phb.png'},
					{text: '电台', img: '../../static/imgs/main/dt.png'},
					{text: '直播', img: '../../static/imgs/main/zb.png'},
				],
				personalizedList: [], // 歌单总列表
				randomPersonalizedList: [],
				newsongList:[],
				randomNewSongList: [],
				firstLimit: 5,
				mvList: [],
				uploading: false,
				nomore: false
			}
		},
		created() {
			this.getBanner();
			this.getPersonalized();
			this.getNewSong();
			this.getMv();
		},
		methods: {
			getBanner() {
				this.$request('/banner').then((res) => {
					this.bannerList = res.banners;
				});
			},
			getPersonalized() {
				this.$request('/personalized').then((res) => {
					this.personalizedList = res.result;
					this.getRandomPersonalizedList();
				});
			},
			getNewSong() {
				this.$request('/personalized/newsong').then((res) => {
					this.newsongList = res.result;
					this.getRandomNewSong();
				});
			},
			getRandomPersonalizedList() {
				let arr = randomList(0,this.personalizedList.length - 1,6);
				let list = [];
				arr.forEach(t => {
					let playCount = this.personalizedList[t].playCount;
					let playCountDesc = playCount >= 100000 ? parseInt(playCount / 10000) + '万' : parseInt(playCount);
					list.push({
						...this.personalizedList[t],
						playCountDesc
					});
				});
				this.randomPersonalizedList = list;
			},
			getRandomNewSong() {
				let arr = randomList(0,this.newsongList.length - 1,3);
				let list = [];
				arr.forEach(t => {
					list.push(this.newsongList[t].song.album);
				});
				this.randomNewSongList = list;
			},
			getMv(n) {
				if (this.nomore) return;
				if (this.uploading) return;
				if (n) {
					this.firstLimit += n;
				}
				/*
					1、遍历数组，每一项发送一次请求，每次请求结束需要执行某些操作
					2、遍历数组，把promise维护到一个数组中，使用Promise.all()来实现多个请求结束后再执行某操作
					3、使用递归，数组中一个请求执行成功以后再执行下一个请求，可以封装后执行每一个请求成功做什么，全部请求成功后做什么。
						缺点是耗时，不是并发请求，对于某些接口不能多次并发请求的场景使用（本系统调用其他系统的接口，
						别人的接口设置了请求次数过多然后重定向url）
				*/
			    let start = this.mvList.length;
			    this.uploading = true;
				this.$request.noloading(`/mv/first?limit=${this.firstLimit}`).then((res) => {
					let pList = [];
					if (res.data.length < this.firstLimit - n) {
						this.nomore = true;
					}
					res.data.forEach((t,i) => {
						if(i>=start){
							// this.$request(`/mv/detail?mvid=${t.id}`).then((res1) => {
							// 	let playCount = res1.data.playCount;
							// 	let playCountDesc = playCount > 100000 ? parseInt(playCount / 10000) + '万' : playCount;
							// 	let commentCount = res1.data.commentCount;
							// 	let commentCountDesc = commentCount >= 100000 ? parseInt(commentCount / 10000) + '万' : commentCount;
							// 	this.mvList.push({
							// 		...res1.data,
							// 		playCountDesc,
							// 		commentCountDesc,
							// 		time: renderTime(res1.data.duration)
							// 	});
							// })
							pList.push(this.$request.noloading(`/mv/detail?mvid=${t.id}`));
						}
					})
					Promise.all(pList).then((resArr)=>{
						this.uploading = false;
						resArr.forEach((t) => {
							let playCount = t.data.playCount;
							let playCountDesc = playCount > 100000 ? parseInt(playCount / 10000) + '万' : parseInt(playCount);
							let commentCount = t.data.commentCount;
							let commentCountDesc = commentCount >= 100000 ? parseInt(commentCount / 10000) + '万' : parseInt(commentCount);
							this.mvList.push({
								...t.data,
								playCountDesc,
								commentCountDesc,
								time: renderTime(t.data.duration)
							});
						})
					})
				})
			},
			onScrolltolower() {
				this.getMv(5);
			},
			
			update(callback) {
				// 更新推荐歌单
				this.getRandomPersonalizedList();
				this.getRandomNewSong();
				setTimeout(() => {
					callback && callback();
					uni.stopPullDownRefresh();
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.mt20{
		margin-top: 20upx;
	}
	.find-wrap{
		width: 100%;
		height: 100%;
		position: relative;
		.swiper-wrap{
			height: 300upx;
			position: relative;
			.swiper{
				width: 100%;
				height: 100%;
				.swiper-item{
					width: 660upx;
					height: 100%;
					margin: 0 auto;
					border-radius: 10upx;
					overflow: hidden;
					.image{
						width: 100%;
						height: 100%;
					}	
					.tag{
						padding:10rpx;
						font-size:24rpx;
						color:#fff;
						position:absolute;
						right:44upx;
						bottom:0;
						z-index:10;
						border-top-left-radius: 10upx;
						border-bottom-right-radius: 10upx;
					}
				}
			}
		}
		.btns-wrap{
			background: #fff;
			width: 660upx;
			height: 200upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #eee;
			.btn-view{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.image{
					width: 100upx;
					height: 100upx;
					margin-bottom: 16upx;
				}
				.text{
					font-size: 24upx;
					color: #777;
				}
			}
		}
		.view-content{
			width: 660upx;
			margin: 0 auto;
			.title-content{
				display: flex;
				height: 130upx;
				justify-content: space-between;
				align-items: center;
				.title{
					color: $uni-text-color;
					font-size: $uni-font-size-lger;
					font-weight: 500;
				}
				.title-btn{
					font-size: 26upx;
					color: $uni-text-color-grey;
					padding: 10upx 20upx; 
					border-radius: 20upx;
					border: 2upx solid #eee;
				}
			}
			.img-wrap{
				width: 100%;
				font-size: 0;
				.img-content{
					width: 208upx;
					margin-right: 18upx;
					margin-bottom: 30upx;
					display: inline-block;
					overflow: hidden;
					&:nth-child(3n){
						margin-right: 0;
					}
					.img{
						position: relative;
						margin-bottom: 12upx;
						.image, img{
							width: 100%;
							height: 200upx;
							border-radius: 10upx;
						}
						.img-text{
							font-size: 20upx;
							color: #fff;
							position: absolute;
							right: 12upx;
							top: 12upx;
							letter-spacing: 2upx;
							display: flex;
							align-items: center;
							.triangle{
								@include triangle();
								position: relative;
								margin-right: 4upx;
								/* #ifdef APP-PLUS */
								top: -4upx;
								/* #endif */
							}
						}
						.img-text1{
							width: 60upx;
							height: 60upx;
							border-radius: 50%;
							background-color: rgba(255,255,255,0.8);
							box-shadow: 0 0 1upx 2upx rgba(200,200,200,0.6);
							position: absolute;
							bottom: 12upx;
							right: 12upx;
							.triangle1{
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-36%,-50%);
								@include triangle(12upx,#e10602);
							}
						}
					}
					.img-name{
						font-size: 24upx;
						color: #333;
						width: 100%;
						height: 60upx;
						overflow: hidden;
						line-height: 30upx;
						text-overflow: ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2; 
					}
					.name,.people{
						display: block;
						font-size: 24upx;
						color: #333;
						width: 100%;
						overflow: hidden;
						line-height: 30upx;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.people{
						font-size: 22upx;
						color: #777;
					}
				}
			}
		}
		.mv-content{
			width: 100%;
			background-color: #ddd;
			padding-top: 20upx;
			.mv-card-wrap{
				background-color: #fff;
				width: 100%;
				.desc{
					width: 660upx;
					margin: 0 auto;
					height: 60upx;
					color: #777;
					font-size: 24upx;
					line-height: 60upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.my-card{
					width: 660upx;
					margin: 0 auto;
					border-radius: 20upx;
					overflow: hidden;
					.image-wrap{
						width: 100%;
						height: 340upx;
						position: relative;
						.image{
							width: 100%;
							height: 100%;
							vertical-align: middle;
							border-top-left-radius: 20upx;
							border-top-right-radius: 20upx;
						}
						.icons{
							position: absolute;
							left: 0;
							bottom: 10upx;
							width: 100%;
							height: 30upx;
							padding: 0 20upx;
							box-sizing: border-box;
							line-height: 30upx;
							color: #fff;
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							.count{
								margin-left: 6upx;
							}
							.triangle{
								@include triangle();
							}
							.play-count{
								display: flex;
								align-items: baseline;
							}
							.time{
								display: flex;
								align-items: baseline;
								.play{
									@include play();
								}
							}
						}
					}
					.name{
						background-color: #ddd;
						width: 100%;
						height: 80upx;
						box-sizing: border-box;
						padding-left: 20upx;
						line-height: 80upx;
						font-size: 30upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.actions{
					width: 660upx;
					margin: 0 auto;
					height: 80upx;
					display: flex;
					justify-content: space-between;
					.counts{
						line-height: 80upx;
						.like, .comment{
							display: inline-block;
							font-size: 24upx;
							color: #777;
							.iconfont{
								margin-right: 6upx;
								font-size: 28upx;
								vertical-align: middle;
							}
						}
						.like{
							margin-right: 50upx;
						}
					}
					.more-btn-wrap{
						width: 20upx;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						.more-btn{
							@include more-btn(#333);
						}
					}
				}
			}
		}
		.loading, .nomore{
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			font-size: 30upx;
			text-align: center;
		}
	}
</style>
